import React from 'react';
import { Link } from 'react-router';
import { observer } from 'mobx-react';
import Im from 'immutable';
import Pagination from 'rc-pagination';
import {Spin} from 'antd';

import Store from './store.js';
import './index.less';

//component
import SetHelmet from 'components/widgets/SetHelmet';
import ReSelectField from 'components/widgets/ReSelectField';
import Empty from "../../widgets/Empty/Empty";

@observer
export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };

    static defaultProps = {};

    name = 'BannerManage';
    store = null;

    constructor(props, context) {

        super(props, context);

        this.name = props.name ? props.name : this.name;
        this.store = new Store({ name: this.name });
        this.bannerTypeList = [{value: '', label: '全部'}, {value: 1, label: 'PC端Web画展'}, {value: 2, label: '移动端Web画展'},
            {value: 3, label: 'PC端Web用户'}, {value: 4, label: '移动端Web用户'}];
        this.state = {
            current:1,
        }

    }

    componentWillMount() {
        this.store.will();
    }

    componentDidMount() {
        this.store.mount();
    }

    componentWillUnmount() {
        this.store.remove();
    }
    componentWillReact() {
        // console.log(arguments);
    }
    onChange = (page) =>{
        console.log(page);
        this.setState({
            current: page,
        });
        this.store.getBannerList(page,20,this.store.type)
    };

    popMenuItemClick(e, item) {
        e.preventDefault();
        e.stopPropagation();
        item.func && (typeof(item.func) === 'function') && item.func();
    }

    render() {
        let prefix = global.window.location.origin.indexOf('manage-test') > -1 ? 'https://staging.artivr.com' : 'https://www.artivr.com';
        return (
            <div className="orin-s-bannermanage-root">
                <SetHelmet title='banner管理'/>
                <div className="header-wrapper">banner管理</div>
                <div className="fix-wrapper">
                    <div className="center-manage-wrapper">
                        <div className="search-wrapper">
                            <ReSelectField
                                type=""
                                className="identity-input"
                                isOpen={false}
                                list={this.bannerTypeList}
                                value={this.store.type}
                                placeholder={'请选择类型'}
                                onChange={(v) => this.store.typeChange(v)}/>
                        </div>
                        <div className="manage-wrapper">
                            <span className="manage-btn" onClick={() => {this.store.addBanner()}}>添加banner</span>
                        </div>
                    </div>
                </div>
                <div className="orin-s-bannerplate-root">
                    <div className="content-new-wrapper">
                        <div className="content-header-title">
                            <div className="content-number title">
                            </div>
                            <div className="content-model title">
                                <span>模块</span>
                            </div>
                            <div className="content-cover title">
                                <span>图片</span>
                            </div>
                            <div className="content-url title">
                                <span>跳转链接</span>
                            </div>
                            <div className="content-sort title">
                                <span>排序</span>
                            </div>
                            <div className="content-more-btn title">
                                <span>更多</span>
                            </div>
                        </div>
                        <div className="content">
                            {
                                this.store.bannerList.map((item, index) => {
                                    let _this = this;
                                    let popMenuOption = [{
                                        'name': '编辑',
                                        'func': (e) => _this.store.editClick(item),
                                    }, {
                                        'name': item.isShare === 1 ? '已发布' : '发布',
                                        'func': (e) => _this.store.releaseClick(item),
                                    }, {
                                        'name': '删除',
                                        'func': (e) => _this.store.deleteClick(item),
                                    }
                                    ];
                                    return (
                                        <div key={index} className="users-wrapper-pc">
                                            <div className="user-item-wrapper">
                                                <div className="content-number">
                                            <span className="text">
                                                {(this.store.currentPage*2-2)*10 + (index+1)}
                                            </span>
                                                </div>
                                                <div className="content-model">
                                                    <p className="text">
                                                <span>
                                                    {item.bannerType}
                                                </span>
                                                    </p>
                                                </div>
                                                <div className="content-cover">
                                                    <div className="cover">
                                                        <img className="cover-image" src={$$.utils.pictureThumb(item.url, true)} size={300}/>
                                                    </div>
                                                </div>
                                                <div className="content-url">
                                                    <p className="text">

                                              <a className="target-url" target="_blank" href={ (item.type ===1 ||  item.type ===2) ?
                                                  `${prefix}/exhibition/${
                                                      item.showId}/detail?social=1`
                                                  :
                                                  `${prefix}/${item.showId}`
                                              }>{ (item.type ===1 ||  item.type ===2) ?
                                                  `${prefix}/exhibition/${
                                                      item.showId}/detail?social=1`
                                                  :
                                                  `${prefix}/${item.showId}`
                                              }</a>
                                                    </p>
                                                </div>
                                                <div className="content-sort">
                                                    <p className="text">
                                                <span>
                                                    {item.sort}
                                                </span>
                                                    </p>
                                                </div>
                                                <div className="content-more-btn">
                                                    {
                                                        popMenuOption.map((item, index) => {
                                                            return (
                                                                <div key={index} className="select-button"
                                                                     onClick={(e) => this.popMenuItemClick(e, item)}>
                                                                    <span className="btn-name">{item.name}</span>
                                                                </div>
                                                            )
                                                        })
                                                    }
                                                </div>
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>
                {
                    !this.store.firstRequest &&
                    <div className="manage-loading-wrapper">
                        <Spin spinning={!this.store.firstRequest} size="large" tip={$$.LN.IS_LOADING}/>
                    </div>
                }
                {
                    this.store.bannerList.length === 0 && this.store.firstRequest &&
                    <Empty tips={'暂无banner记录'}/>
                }
                {
                    this.store.bannerList.length > 0 &&
                    <div className="pagination-wrapper">
                        <div className="pagination-count">
                            总共{this.store.total}条数据，当前有{this.store.bannerList.length}条
                        </div>
                        <Pagination
                            onChange={(current) => this.store.paginationChange(current)}
                            defaultPageSize={$$.SEM.BANNER_LIST_SIZE}
                            current={this.store.currentPage}
                            defaultCurrent={this.store.currentPage}
                            total={this.store.total}/>
                    </div>
                }
            </div>
        );
    }
}